<script setup lang="ts">
defineOptions({
  name: "fabAreaItem"
});

import { ref } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";

interface Props {
  data?: Record<string, any> | null;
  dataTypes?: Array<any>;
  defaultparameter?: Record<string, any>;
}

const props = withDefaults(defineProps<Props>(), {
  data: () => ({}),
  dataTypes: () => [],
  defaultparameter: () => ({})
});

const emits = defineEmits(["click"]);

const echartsComRef = ref<any>(null);

const clickHandler = (data?: any, flag?: boolean) => {
  data.isShowEchartsClick = !data.isShowEchartsClick;
  if (flag) {
    const { options } = data;
    options && emits("click", data);
  }
};

const mouseoverHandler = (data: any) => {
  data.isShowEchartsHover = true;
};

const mouseleaveHandler = (data: any) => {
  data.isShowEchartsHover = false;
};
</script>

<template>
  <px-popover
    placement="top"
    trigger="hover"
    :visible="!!data.isShowEchartsHover || !!data.isShowEchartsClick"
    :hide-after="0"
    :width="dataTypes.length && data?.options ? 400 : 100"
    popper-class="fab-area-item-popover"
  >
    <template #reference>
      <div
        class="fab-area-item-label"
        @click="clickHandler(data)"
        @dblclick="clickHandler(data, true)"
        @mouseover="mouseoverHandler(data)"
        @mouseleave="mouseleaveHandler(data)"
      >
        {{ data?.label }}
      </div>
    </template>
    <template #default>
      <div v-if="dataTypes.length && data?.options" class="fab-area-item-echarts">
        <div class="fab-area-item-echarts-title">{{ `${data?.label}${defaultparameter.name ? "（" + defaultparameter.name + "）" : ""}` }}</div>
        <div class="fab-area-item-echarts-cont">
          <echartsCom ref="echartsComRef" :options="data?.options" />
        </div>
      </div>
      <div v-else class="fab-area-item-default">暂无数据</div>
    </template>
  </px-popover>
</template>

<style lang="scss">
.fab-area-item-label {
  position: absolute;
  top: -34px;
  left: -50%;
  height: 36px;
  padding: 0 12px;
  font-weight: 600;
  line-height: 36px;
  color: var(--px-color-primary);
  white-space: nowrap;
  user-select: none;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 16px #bbb;
  transform: translateX(-50%);

  &:hover {
    z-index: 99;
    color: #fff;
    cursor: pointer;
    background-color: var(--px-color-primary);

    &::before {
      background-color: var(--px-color-primary);
    }
  }

  &::before {
    position: absolute;
    top: 28px;
    left: calc(50% - 6px);
    z-index: 0;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #fff;
    transform: rotate(45deg);
  }
}

.fab-area-item-popover {
  min-width: 100px !important;
}

.fab-area-item-echarts-title {
  width: 100%;
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1;
  color: #333;
}

.fab-area-item-echarts-cont {
  width: 100%;
  height: 220px;
}

.fab-area-item-default {
  width: 100%;
  line-height: 24px;
  text-align: center;
}
</style>
